<table class="hl-table">
	<thead>
        <tr>
            <th>Hình</th>
            <th>Tên sản phẩm</th>
            <th>Màu sắc</th>
            <th>Size</th>
            <th>Giá</th>
            <th>Số lượng</th>
            <th>Thành tiền</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
	<?php 
    	$sum = 0;
    	foreach($medias as $media) {
        $sum += $media['price'] * $media['qty'];
    ?>
        <tr>
            <td><img src="<?php echo $media['imagethumbnail']?>" class="hl-center"/></td>
            <td><?php echo $media['title']?></td>
            <td><select class="mausac" ref="<?php echo $media['mediaid']?>" color="<?php echo $media['color']?>" id="mausac-<?php echo $media['mediaid']?>" name="mausac[<?php echo $media['mediaid']?>]"></select></td>
            <td><select class="size" ref="<?php echo $media['mediaid']?>" msize="<?php echo $media['size']?>" id="size-<?php echo $media['mediaid']?>" name="size[<?php echo $media['mediaid']?>]"></select></td>
            <td class="number"><?php echo $this->string->numberFormate($media['price'])?><?php echo $this->document->setup['Currency']?></td>
            <td><input type="text" name="qty" class="hl-textbox number" value="<?php echo $this->string->numberFormate($media['qty'])?>" size="3" onblur="cart.update('<?php echo $media['mediaid']?>',this.value)" /></td>
            <td class="number"><?php echo $this->string->numberFormate($media['price'] * $media['qty'])?><?php echo $this->document->setup['Currency']?></td>
            <td><input type="button" class="hl-button" name="btnRemove" value="Xóa" onclick="cart.remove('<?php echo $media['mediaid']?>')"/></td>
        </tr>
    <?php } ?>
    </tbody>
    <tfoot>
    	<tr>
        	<td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Tổng cộng</td>
            <td class="number"><?php echo $this->string->numberFormate($sum)?><?php echo $this->document->setup['Currency']?></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<script language="javascript">

$(document).ready(function(){
	numberMod();
	$('.mausac').each(function(index, element) {
        var mediaid = $(this).attr('ref')
		$.getJSON("?route=module/pagedetail/getProperties",
			{
				mediaid:mediaid,
				catid:'color'
			},
			function(data)
			{
				var cb = '<option value=""></option>';
				for(i in data)
				{
					//alert(data[i].categoryname);
					cb+= '<option value="'+ data[i].categoryid +'">'+ data[i].categoryname+'</option>';
				}
				$('#mausac-'+mediaid).html(cb);
				$('#mausac-'+mediaid).val($('#mausac-'+mediaid).attr('color'));
				$('#mausac-'+mediaid).change(function(e) {
                    cart.updateCol(mediaid,'color',$(this).val());
                });
			});
    });
	
	$('.size').each(function(index, element) {
        var mediaid = $(this).attr('ref')
		$.getJSON("?route=module/pagedetail/getProperties",
			{
				mediaid:mediaid,
				catid:'size'
			},
			function(data)
			{
				var cb = '<option value=""></option>';
				for(i in data)
				{
					//alert(data[i].categoryname);
					cb+= '<option value="'+ data[i].categoryid +'">'+ data[i].categoryname+'</option>';
				}
				$('#size-'+mediaid).html(cb);
				$('#size-'+mediaid).val($('#size-'+mediaid).attr('msize'));
				$('#size-'+mediaid).change(function(e) {
                    cart.updateCol(mediaid,'size',$(this).val());
                });
			});
    });
});
</script>